<template>
  <button @click="model=true">Open Model</button>
  <div v-if="model" ref="modelRef" class="modal" @click="originClick">
    <div class="inner">
      <button class="button small" title="Close" @click="model=false">
        𝖷
      </button>
      <p class="heading">
        Demo Modal
      </p>
      <p>Click outside of the modal to close it.</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { onClickOutside } from "@vueuse/core";

defineOptions({
  name: "OnClickOutside2"
})

const model = ref<boolean>(false)
const modelRef = ref<HTMLElement | null>(null)

onClickOutside(modelRef, (event) => {
  console.log('click outside:', event.composedPath())
  model.value = false
})

const originClick  = event => console.log('originClick:', event.composedPath())

watch(model, (value) => {
  console.log('model:', value)
})
</script>

<style scoped lang="css">
.modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  max-width: 100%;
  z-index: 10;
}
.inner {
  background-color: lightblue;
  padding: 0.4em 2em;
  border-radius: 5px;
  border: 1px solid lightblue;
  box-shadow: 2px 2px 10px rgba(10, 10, 10, 0.1);
}
</style>
